<template>
<div>
  <el-button  @click="exls()">导出</el-button>
  <el-table
      :data="dict"
      stripe
      style="width: 100%">
    <el-table-column
        prop="expiration_time"
        label="还款时间">
    </el-table-column>
    <el-table-column
        prop="name"
        label="用户名"
    >
    </el-table-column>
    <el-table-column
        prop="money"
        label="还款金额"
    >
    </el-table-column>
    <el-table-column
        prop="interest_rate"
        label="利率">
    </el-table-column>
    <el-table-column
        prop="statur"
        label="状态">
      <template  v-slot="scope">
        <div v-if="scope.row.statur==1">催促</div>
        <div v-else>已催促</div>
      </template>
    </el-table-column>
<!--    <el-table-column-->
<!--        prop="use1"-->
<!--        label="借款用途	">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="interest_rate"-->
<!--        label="利息">-->
<!--    </el-table-column>-->
    <el-table-column fixed="right" label="操作" width="120">
      <template  v-slot="scope">
<!--        <el-button type="text" size="small"-->
<!--        >通过</el-button-->
<!--        >-->
        <el-button type="text" size="small" @click="refuse(scope.row.userid,scope.row.id)">查看详情</el-button>

      </template>
    </el-table-column>
  </el-table>

</div>
  <div>
    <el-dialog v-model="dialogVisible" title="查看用户消息" width="30%" draggable>
      <span>用户手机号 <div v-show="show_phone_two">*******</div> <div v-show="show_phone_one">{{phone}}</div><el-button @click="show_phone_one = true;show_phone_two=false">查看</el-button> </span>
<!--      <span>邮箱为{{email}}</span>-->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="queren"
        >确认</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
// import fileDownload from 'js-file-download'

export default {
name: "collection_user",
  data(){
  return{
    dict:[],
    dialogVisible : ref(false),
    phone:'',
    email:'',
    show_phone_one:false,
    show_phone_two:true,
    nuid:''
  }
  },
  methods:{
    exls(){
      // this.axios.post('http://localhost:5000/download')
      //     .then(res=>{
      //       fileDownload(res.data,'催收管理.xlsx')
      //     })
      this.myaxios('http://localhost:5000/downloads','get',{}).then(res=>{
        console.log(res)
        window.location.href = res.url; // 本窗口打开下载
        // window.open(res.url, '_blank'); // 新开窗口下载
      })
    },
  queren(){
    this.dialogVisible=false
    this.myaxios('http://localhost:5000/update_User_details','get',{'nuid':this.nuid}).then(res=>{
      console.log(res)
    if (res.code=="200" && this.show_phone_two==false){
      this.$message({
        type: 'success',
        message: '催促成功!'
      });
    }

    })
  },
    refuse(id,nuid){
      console.log(id)
      console.log(nuid)
      this.nuid=nuid
      this.dialogVisible=true
      this.myaxios('http://localhost:5000/get_User_details','get',{'userid':id}).then(res=>{
        console.log(res)
        this.phone=res.data['mobile']
        console.log(res.data['mobile'])
        this.email=res.data['email']

      })
    },
    get_marklist(){
      this.myaxios('http://localhost:5000/get_collector','get',{}).then(res=>{
        console.log(res)
        this.dict=res.data

      })
    },
  },
  mounted() {
  this.get_marklist()
  }
}
</script>

<style scoped>

</style>
